<template>
  <div>
    <Category :disabled="showState!==2" />
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      :style="{ marginTop: '30px' }"
    >
      <SpuFrom v-if="showState === 0" @setState="setState" :spuInfo="spuInfo" />
      <SkuFrom v-if="showState === 1" :spuInfo="spuInfo" @setState="setState" />
      <SpuList v-if="showState === 2" @setState="setState" />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Spu"
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import SpuFrom from "./components/SpuForm/index.vue";
import SkuFrom from "./components/SkuForm/index.vue";
import SpuList from "./components/SpuList/index.vue";
import useAttrStore from "@/stores/attr";
import type { spuImageListType, spuInfoType, spuSaleAttrListType } from "@/api/spu";
import { storeToRefs } from "pinia";

const attrStore = useAttrStore();
const { category3Id } = storeToRefs(attrStore);
/**@spuInfo 创建一个保存完整spuInfo数据的容器*/
const spuInfo = ref<spuInfoType>({
  category3Id: category3Id.value,
  description: "",
  spuName: "",
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: []
});

const showState = ref(2);
/**@setState 控制spu视图显示隐藏的自定义事件函数*/
const setState = (state: number, row?: spuInfoType) => {
  showState.value = state;
  //判断是修改还是新增，只有在修改的时候row才是有数据的
  if (row) {
    spuInfo.value = row;
  } else {
    spuInfo.value = {
      category3Id: category3Id.value,
      description: "",
      spuName: "",
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: []
    };
  }
};

</script>
